<template>
  <div class="login-box">
    <!-- =================== -->
    <div>
      <p class="btn">
        <button>新增</button>
        <button @click="ab">全部删除</button><button @click="ab">批量删除</button></p>
      <el-table
        style="width: 100%"
        :data="
          tableData.slice((currentPage - 1) * pageSize, pageSize * currentPage)
        "
        @selection-change="handelSelectionChange"
        
      >
        <el-table-column
          type="selection"
          prop="select"
          label="全选"
          width="150"
        >
          <!-- @selection-change="handelSelectionChange" -->
        </el-table-column>

        <!-- :data="userList.slice((currentPage - 1) type="selection" * pagesize, currentPage * pagesize)" -->
        <el-table-column prop="id" label="编号" width="150"> </el-table-column>
        <el-table-column prop="userName" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="titles" label="标题" width="300">
        </el-table-column>
        <el-table-column prop="status" label="状态" width="120">
        </el-table-column>
        <el-table-column prop="modify_time" label="时间" width="300">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small">查看</el-button>
            <el-button type="text" size="small"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
      >
      </el-pagination>
      <!-- 新增人员 -->

    </div>
    <!-- current-page 当前显示第几页的数据 -->
    <!-- :page-size="100"  每页显示多少条数据-->
    <!-- layout="total, sizes, prev, pager, next, jumper"   表示展示哪些功能组件 -->
    <!--total：表示共total条  size:展示每页显示多少条的菜单 jumper:跳页 -->
    <!-- ====================== -->
    <!-- <el-button type="text" @click="dialogVisible = true"
      >点击打开 Dialog</el-button -->
  </div>
</template>

<script>
import * as dayjs from "dayjs";
// const cityOptions = [1, 2, 3];
import mock from "../mock/mock.js";
export default {
  name: "mock",
  components: {
    mock,
    dayjs,
  },
  data() {
    return {
      arr: [],
      // dialogVisible: false,
      titles: "",
      id: "",
      title: "",
      // 获取用户列表的参数对象
      currentPage: 1,
      pageSize: 5,
      tableData: [],
      ids: "",
      //==========
    
    };
  },
  created() {
    this.data();
  },
  //  mounted() {
  //     this.data();
  //     // this.add()
  //   },
  methods: {
    data() {
      this.$http.get("http://localhost:3001/searchtxt").then((res) => {
        this.tableData = res.data;
        console.log(typeof res.data);
        console.log(res.data);
        for (let i = 0; i < this.tableData.length; i++) {
          const a = dayjs(this.tableData[i].modify_time).format(
            "YYYY-MM-DD HH:mm:ss"
          );
          this.tableData[i].modify_time = a;
        }
      });
    },
    // 监听pagesize 改变的事件
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.data();
    },
    // 切换页数时 调用
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.data();
      // console.log(10)
    },
    // ===============

    handelSelectionChange(val) {
      console.log(val);
      this.arr = val;
    },
    ab(val) {
      for (let i = 0; i < this.arr.length; i++) {
        console.log(this.arr[i].id);
        this.$http
          .get("http://localhost:3001/api/del", {
            params: {
              id: this.arr[i].id,
            },
          })
          .then((res) => {
            this.data();
            console.log(res);
          });
      }
      // console.log(this.arr)
    },
    // 监听页码值 改变的事件

    // =============================
    // edit() {
    //   this.dialogVisible = true;
    // },
    // confirm() {
    // this.$http
    //   .get("http://localhost:3001/changeTxt", {
    //     params: {
    //       id:this.id,
    //       // userName:row.userName,
    //       // modify_time:row.modify_time,
    //       titles: row.titles,
    //     },
    //   })
    //   .then((res) => {
    //     console.log(res);
    //   });
    // },
  },
};
</script>

<style  scoped>
.login-box {
  height: 100%;
  overflow: auto;
  /* scroll; */
}
.btn{
  text-align: left;
}
.btn button{
  margin-left: 26px;
  background-color: #6cb209;
  border: none;
  border-radius: 3px;
  height: 28px;
  line-height: 28px;
}
</style>